@import "//at.alicdn.com/t/font_3056501_9xicwwpsoug.css";
@import "../../px2rem.scss";
.new_house {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .house_header {
        flex-shrink: 0;
        height: px2rem(100px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #4876ff;
        font-size: px2rem(30px);
        padding: 0 px2rem(20px);
        color: #fff;
        flex-shrink: 0;
        &>div {
            display: flex;
            width: px2rem(160px);
            border: 1px solid #fff;
            border-radius: px2rem(20px);
            height: px2rem(50px);
            align-items: center;
            justify-content: space-between;
            padding: 0 px2rem(20px);
            span {
                width: px2rem(40px);
                height: px2rem(40px);
                border-radius: 50%;
                border: 1px solid #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                b {
                    width: 3px;
                    height: 3px;
                    background: #fff;
                }
            }
        }
    }
    .search {
        flex-shrink: 0;
        width: 100vw;
        height: px2rem(80px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 px2rem(20px);
        p {
            font-size: px2rem(30px);
            i {
                font-size: px2rem(30px);
            }
        }
        div {
            height: px2rem(50px);
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            background: #f1f1f1;
            input {
                border: none;
                outline: none;
                background: #f1f1f1;
                margin-left: 4px;
            }
            i {
                margin-right: 3px;
            }
        }
        &>span {
            font-size: px2rem(30px);
        }
    }
    .house_menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: px2rem(20px) 0;
        flex-shrink: 0;
        div {
            width: 33.33%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            i {
                font-size: px2rem(40px);
            }
            span {
                font-size: px2rem(30px);
            }
        }
    }
    .house_filter {
        flex-shrink: 0;
        width: 100vw;
        height: px2rem(100px);
        border-top: 1px solid #222;
        border-bottom: 1px solid #222;
        display: flex;
        align-items: center;
        justify-content: space-around;
        &>div {
            flex: 2;
            display: flex;
            justify-content: center;
            font-size: px2rem(30px);
            &>i {
                font-size: px2rem(36px);
            }
        }
        &>i {
            flex: 1;
        }
    }
    .house_content {
        flex: 1;
        overflow-y: auto;
        .list-box {
            margin: 10px auto;
            width: 100%;
            padding: 0 px2rem(10px);
            display: flex;
            img {
                width: px2rem(300px);
                height: px2rem(200px);
            }
            .list-item {
                margin-left: 10px;
                &>div {
                    margin: 7px 0;
                    display: flex;
                    h3 {
                        color: orange;
                        display: flex;
                    }
                }
                &>p {
                    margin: 7px 0;
                }
                &>span {
                    display: inline-block;
                    padding: 3px 5px;
                    background-color: #ccc;
                }
            }
        }
    }
}